{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

<div class="c-hero-video">
  <video preload="auto" playsinline autoplay muted loop poster="{{ static('img/firefox/built-for-you/pinocchio-1000.jpg') }}" width="800" height="600">
    <source src="https://assets.mozilla.net/video/built-for-you/video-pinocchio-de.webm" type="video/webm">
  </video>

  {{ resp_img('img/firefox/built-for-you/pinocchio-800.jpg',
      srcset={
        'img/firefox/built-for-you/pinocchio-600.jpg': '600w',
        'img/firefox/built-for-you/pinocchio-800.jpg': '800w',
        'img/firefox/built-for-you/pinocchio-1000.jpg': '1000w',
        'img/firefox/built-for-you/pinocchio-1200.jpg': '1200w',
      },
      sizes={
        '(min-width: 768px)': 'calc(50vw - 192px)',
        'default': 'calc(100vw - 48px)'
      },
      optional_attributes={
        'class': 'mzp-c-split-media-asset fallback',
        'alt': '',
        'width': '800',
        'height': '600',
      },
  ) }}
</div>
